<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页显示</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="styleshee">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</head>
<body>
<ul>
    {% for page in page_objects %}
        <li>{{ page.s_name }}</li>
    {% endfor %}
</ul>

<nav aria-label="Page navigation">
    <ul class="pagination">
        {# 上一页 #}
        {% if page_objects.has_previous %}
            <li>
                <a href="{% url 'tmp:get_student_with_page' %}?page={{ page_objects.previous_page_number }}"
                   aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
        {% else %}
            <li class="'disabled">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
        {% endif %}
        {# 页码显示 #}
        {% for page_index in page_range %}
            <li><a href="{% url 'tmp:get_student_with_page' %}?page={{ page_index }}">{{ page_index }}</a></li>
        {% endfor %}
        {# 下一页 #}
        {% if page_objects.has_next %}
            <li>
                <a href="{% url 'tmp:get_student_with_page' %}?page={{ page_objects.next_page_number }}"
                   aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        {% else %}
            <li class="disabled">
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        {% endif %}
    </ul>
</nav>

</body>
</html>